<template>
  <div class="app-container">
    <el-button class="primaryBth" type="primary" size="default" @click="rewardBtn">奖惩资料建档</el-button>
    <el-dialog title="奖惩资料" v-model="isShow" width="55%" draggable>
      <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" :searchImg="false" />
      <Find :OriginalFilter="{ static: true }" class="mt10" :formList="formList2" @findClicked="findClicked2" />
      <div class="flex AIC">
        <h1 class="f16 mt10">奖惩资料</h1>
        <JDialog :tableHeader="tableHeader" :width="73" @removeOne="removeOne" :currentTableRow="currentTableRow" :unAdd="true" />
      </div>
      <Table :tableHeader="tableHeader" :tableData="tableData" class="mt10" :outTableHeight="150" @currentRow="currentRow" :isLoading="isLoading" />
      <PageModule :PageData="{ total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { debounce } from 'lodash'
import { defineComponent, type PropType, onMounted, watch } from 'vue'
import LoginWork from '@/utils/LoginWork'
import service from '@/utils/request'
import { formateData } from '@/plugins/mixinJ'
import { ElMessage } from 'element-plus'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'RewardAndPunishment'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, reactive } from 'vue'
const isShow = ref(false)
const rewardBtn = () => {
  isShow.value = true
  getTableList()
}

const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
const isLoading = ref(false)
const tableHeader = ref([
  {
    prop: 'ddate',
    label: '奖惩日期'
  },
  {
    prop: 'deptName',
    label: '部门名称'
  },
  {
    prop: 'workId',
    label: '工号'
  },
  {
    prop: 'name',
    label: '姓名'
  },
  {
    width: '150px',
    prop: 'idNo',
    label: '身份证号码'
  },
  {
    prop: 'position',
    label: '职务'
  },
  {
    prop: 'type',
    label: '奖惩类别'
  },
  {
    prop: 'nums',
    label: '奖惩次数'
  },
  {
    width: '200px',
    prop: 'reason',
    label: '奖惩原因'
  }
])

const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入工号',
    inputValue: ''
  },
  {
    inputDisabled: true,
    type: 'input',
    inputPlaceholder: '请输入部门名称',
    inputValue: ''
  },
  {
    inputDisabled: true,
    type: 'input',
    inputPlaceholder: '请输入姓名',
    inputValue: ''
  },
  {
    inputDisabled: true,
    type: 'input',
    inputPlaceholder: '请输入身份证号码',
    inputValue: ''
  },
  {
    inputDisabled: true,
    type: 'input',
    inputPlaceholder: '请输入职务',
    inputValue: ''
  },
  {
    type: 'dateSingle',
    inputPlaceholder: '请输入奖惩日期',
    inputValue: ''
  },
  {
    type: 'select',
    selectLabel: '',
    selectP: '奖惩类别',
    selectValue: '',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '大功',
        optionLabel: '大功'
      },
      {
        optionKey: '2',
        optionValue: '小功',
        optionLabel: '小功'
      },
      {
        optionKey: '3',
        optionValue: '嘉奖',
        optionLabel: '嘉奖'
      },
      {
        optionKey: '4',
        optionValue: '警告',
        optionLabel: '警告'
      },
      {
        optionKey: '5',
        optionValue: '处分',
        optionLabel: '处分'
      },
      {
        optionKey: '6',
        optionValue: '小过',
        optionLabel: '小过'
      },
      {
        optionKey: '7',
        optionValue: '大过',
        optionLabel: '大过'
      }
    ]
  },
  {
    type: 'input',
    inputPlaceholder: '请输入奖惩次数',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入奖惩原因',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '插入奖惩资料'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
]) as any
// 表一按钮
const findClicked = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '插入奖惩资料') {
    // 向服务器发送请求，更新外派单信息
    const res = (await LoginWork.post(`/Employee/InsertRewardAndPunishmentInformation`, {
      ddate:
        formList.value.find(
          (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入奖惩日期'
        )?.dateValue + ' 00:00:00',
      deptName: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入部门名称'
      )?.inputValue,
      idNo: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入身份证号码'
      )?.inputValue,
      name: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入姓名'
      )?.inputValue,
      nums: Number(
        formList.value.find(
          (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入奖惩次数'
        )?.inputValue
      ),
      position: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入职务'
      )?.inputValue,
      reason: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入奖惩原因'
      )?.inputValue,
      type: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '奖惩类别')
        ?.selectValue,
      workerId: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入工号'
      )?.inputValue
    })) as any
    // 判断请求是否成功
    if (res.code === 200) {
      JMessage.success(res.message)
      formList.value.forEach((item: any) => {
        item.inputValue = ''
        item.selectValue = ''
        item.dateValue = ''
      })
    } else {
      JMessage.error(res.message)
    }
    // 重新获取表格数据
    getTableList()
  }
}
const findClicked2 = async (content: string) => {
  if (content === '置空') {
    formList2.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
}

const formList2 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入工号',
    inputValue: ''
  },
  {
    type: 'date',
    dateLabel: '奖惩日期',
    dateValue: ''
  },
  {
    type: 'select',
    selectLabel: '',
    selectP: '奖惩类别',
    selectValue: '',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '大功',
        optionLabel: '大功'
      },
      {
        optionKey: '2',
        optionValue: '小功',
        optionLabel: '小功'
      },
      {
        optionKey: '3',
        optionValue: '嘉奖',
        optionLabel: '嘉奖'
      },
      {
        optionKey: '4',
        optionValue: '警告',
        optionLabel: '警告'
      },
      {
        optionKey: '5',
        optionValue: '处分',
        optionLabel: '处分'
      },
      {
        optionKey: '6',
        optionValue: '小过',
        optionLabel: '小过'
      },
      {
        optionKey: '7',
        optionValue: '大过',
        optionLabel: '大过'
      }
    ]
  },
  {
    type: 'input',
    inputPlaceholder: '请输入部门名称',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入姓名',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
])
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await service.post<any, any>('/Employee/SearchForRewardAndPunishmentInformation', {
    ddateEnd: formList2.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '奖惩日期'
    )?.dateValue?.[1],
    ddateStart: formList2.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '奖惩日期'
    )?.dateValue?.[0],
    deptName: formList2.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入部门名称'
    )?.inputValue,
    name: formList2.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入姓名'
    )?.inputValue,
    type: formList2.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '奖惩类别')
      ?.selectValue,
    workerId: formList2.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入工号'
    )?.inputValue,
    pageNum: currentPage.value,
    pageSize: pageSize.value
  })
  isLoading.value = false
  tableData.value = tableDataList.list
  total.value = tableDataList.total
  currentRow()
}, 500)

// 获取工号
const getRewardAndPunishmentMaterials = debounce(async () => {
  const workerId =
    formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入工号'
    )?.inputValue || ''
  // 获取奖惩资料
  const res = (await LoginWork.post(`/Employee/getFiling0fRewardAndPunishmentMaterials?workerId=${workerId}`)) as any
  if (res.code === 200) {
    formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入部门名称'
    ).inputValue = res.data.deptName
    formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入姓名'
    ).inputValue = res.data.name
    formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入身份证号码'
    ).inputValue = res.data.idNo
    formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入职务'
    ).inputValue = res.data.position
  }
}, 500)
watch(formList.value[0], () => {
  getRewardAndPunishmentMaterials()
})
watch(formList2.value, () => {
  getTableList()
})
// 点击表给另一张表传数据
const currentTableRow = ref({}) as any
const currentRow = async (row: any = tableData.value[0] ? tableData.value[0] : {}) => {
  currentTableRow.value = row
}

// 删除
const removeOne = async () => {
  const { id } = currentTableRow.value
  // 向服务器发送请求，更新外派单信息
  const res = (await LoginWork.post(`/Employee/delForRewardAndPunishmentInformation?id=${id}`)) as any
  // 判断请求是否成功
  if (res.code === 200) {
    JMessage.success(res.message)
  } else {
    JMessage.error(res.message)
  }
  // 重新获取表格数据
  getTableList()
}
</script>
